<div class="bjui-pageContent">
    <form id="visualization-search" data-toggle="ajaxform" action="/devices/getchartdata" data-options="{validate:false,okalert:false,loadingmask:true,beforeSubmit:before_submit,okCallback:chart_submit}">
        <div class="row">
          <input type="hidden" name="sn" value="{{deviceSn}}">
          <div class="row-input" style="display: inline-block;width: 200px;">
            <select class="selectpicker show-tick form-control input-nm visualization-date"  data-width="200" name="id" >
            </select>
          </div>
          <div class="search-input">
            <span class="position-relative">
                <input type="text" name="createdate" id="test02" style="width: 200px">
                <a class="date-icon"><i class="fa fa-calendar"></i></a>
            </span>
            <button type="submit" class="search-btn" data-icon="search"></button>
          </div>
        </div>
    </form>
    <div id="ktvDataChart" style="width: 100%;height:480px;"></div>
</div>

<div class="btns-group bjui-pageFooter">
    <button type="button" class="close-btn">取消</button>
</div>
<script type="text/javascript">
  
  $(function(){
    
$("input").placeholder();
      dialog_close();
      $("#test02").jeDate({
          isinitVal:true,
          trigger: "click focus",
          format: "YYYY-MM"
      });
      $('.date-icon').click(function () {
        $('#test02').focus();
      })
      var sn='{{deviceSn}}'
      $.ajax({
        url:'/devices/getKtvListBySn',
        type:'post',
        data:{'sn':sn},
        dataType:'json',
        success:function (data) {
          if(data.statusCode=='200'){
                $.each(data.list,function(i,item){
                    $("[name='id']").append('<option value="'+item.id+'" >'+item.name+'</option>')
                })
                $("[name='id']").selectpicker('render');
                $("[name='id']").selectpicker('refresh');
            }
            init_chart();
        }
      })
      

  })
function before_submit(form){
    var re = /^(\d{4})-(\d{2})$/; 
    if($("#test02").val()==""){
          $("#test02").attr("placeholder","请选择时间");
     }else{
          $("#test02").attr("placeholder","请选择正确格式时间");
        if(re.test($("#test02").val())){
         return true;
        }else{
         $("#test02").val("");
        }
    }
}

  function chart_submit(json, options){
    set_chart(json);
  }
  function init_chart(){
     $.ajax({
        url:'/devices/getchartdata',
        type:'post',
        data:{'sn':'{{deviceSn}}','id':$("[name='id']").val(),'createdate':$('#test02').val()},
        dataType:'json',
        success:function (data) {
          set_chart(data);
        }
      })
  }
  function set_chart(json){
    var lineValue=json.data.value,valueArr=[],monthArr=[],searchDate,monthArr=[],index=0,barHeight=[];
    var ktvChart = echarts.init(document.getElementById('ktvDataChart'));
    if($("[name='id']").selectpicker('val')=='0'){//字节转换整数
        $.each(lineValue,function(i,item){
          var aa=parseInt(item,16);
          valueArr.push(aa);

        })
        lineValue =valueArr;
    }else if($("[name='id']").selectpicker('val')=='3'){
        $.each(lineValue,function(i,item){
          barHeight.push(100);             //y轴高度
        })
    }
    if(json.data.createdate.length=='0'){
        if($('#test02').val()==''){
          searchDate=$.get_month();
        }else{
          searchDate=$('#test02').val()+'-01';
        }
        var nowdate = new Date(Date.parse(searchDate.replace(/-/g,"/"))).getTime();
        var dateCount = (new Date(nowdate-1000*60*60*24)).getDate();
        for(var i = 1; i <= dateCount; i++){
          // var date = new Date(nowdate);
          monthArr.push($.formatDate(new Date(new Date(nowdate).getFullYear(), new Date(nowdate).getMonth()+1, i)));
        }

    }else{
      monthArr=json.data.createdate;
    }
    if(lineValue.length=='0'){
      lineValue=[];
    }
    if($("[name='id']").selectpicker('val')!='3'){
       var option3 = {
          title: {
            text: '{{deviceSn}}',
            x: 'center'
          },
          tooltip: {
              trigger: 'axis'
          },
          toolbox: {
              right:'20',
              feature: {
                  saveAsImage: {},
                  myTool1:{
                    show:true,
                    title:'刷新',
                    icon:'path://M857.146343 390.039297c-10.937097 4.6366-23.552415-0.463558-28.189016-11.44875C775.105838'+
                    ' 250.806209 650.71069 168.174234 512.004605 168.174234c-189.5511 0-343.830883 154.247037-343.830883 '+
                    '343.830883 0 189.567473 154.279782 343.830883 343.830883 343.830883 138.626267 0 263.021415-82.535785 '+
                    '316.90565-210.257701 4.621251-10.952446 17.251919-16.053628 28.124548-11.416004 10.952446 4.588505 '+
                    '16.1007 17.188474 11.464099 28.157293-60.582797 143.66298-200.568015 236.495272-356.494297 '+
                    '236.495272-213.263152 0-386.809743-173.530219-386.809743-386.809743 0-213.263152 173.546591-386.809743 '+
                    '386.809743-386.809743 156.037822 0 295.974945 92.929506 356.590488 236.719376C873.198947 372.851846 '+
                    '868.082416 385.467165 857.146343 390.039297L857.146343 390.039297zM877.35664 404.589688 640.941186 '+
                    '404.589688c-11.864212 0-21.457708-9.641591-21.457708-21.521153 0-11.864212 9.593496-21.457708 '+
                    '21.457708-21.457708l214.894302 0 0-214.894302c0-11.879562 9.641591-21.521153 '+
                    '21.521153-21.521153s21.457708 9.641591 21.457708 21.521153l0 236.352009C898.814348 394.948097 889.236202 '+
                    '404.589688 877.35664 404.589688L877.35664 404.589688z',
                    onclick:function(){
                      $("#visualization-search").submit();
                    }
                  }
              }
          },
          xAxis: {
              type: 'category',
              data: monthArr
          },
          yAxis: {
              type: 'value'
          },
          dataZoom: [
              {
                  show: true,
                  start: 0,
                  end: 100,
              },
              {
                  type: 'inside',
                  realtime: true,
                  start: 0,
                  end: 100
              }
          ],
          series: [{
              data: lineValue,
              type: 'line'
          }]
      };
    }else if($("[name='id']").selectpicker('val')=='3'){
      var option3 = {
          color: ['#3398DB'],
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: function (params) {
                  return '数据：'+lineValue[params[0].dataIndex];
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '8%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : monthArr,
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  show:false
              }
          ],
          dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 100,
                },
                {
                    type: 'slider',
                    // realtime: true,
                    start: 0,
                    end: 100
                }
                  ],
          series : [
              {
                  name:'数据',
                  type:'bar',
                  label: {
                      normal: {
                          show: true,
                          position: 'inside',
                          formatter: function(data){
                            return lineValue[data.dataIndex]; 
                            
                          }
                      }
                  },
                  barWidth: '60%',
                  data:barHeight
              }
          ]
      };
    }
   
      ktvChart.clear();
      ktvChart.setOption(option3,true);
  }
</script>